<template>
  <div>
    <el-main>
      <el-row type="flex">
        <el-col style="display: flex;align-items: center;">
          <el-select v-model="sort_column" placeholder="请选择排序" @change="columnChange" clearable>
            <el-option v-for="item in columnOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>

          <div style="font-size: 15px;margin-left: 10px;">
            <div>检索关键词：{{ this.val }}</div>
            <div>共检索出{{ this.page.total }}条</div>
          </div>
        </el-col>

      </el-row>
      <el-table v-if="type == 1" id="table" :header-cell-style="{ background: '#F3F8FE' }" @row-click="rowClick"
        :data="tableData" border style="width: 100%;margin: 20px 0;">
        <el-table-column prop="ano" align="center" width="150" label="缩略图">
          <template slot-scope="scope">
            <div style="display: flex;justify-content: center;">
              <img v-if="scope.row.IMGO" :src="scope.row.IMGO" alt=""
                style="width: 100px; height: 100px; margin-right: 10px;">
              <div v-else>暂无数据</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="ano" align="center" label="申请号">
        </el-table-column>
        <el-table-column prop="tic" align="center" label="专利标题" width="300">
        </el-table-column>
        <el-table-column align="center" label="当前权利状态">
          <template slot-scope="scope">
            <el-tag style="border:none;" size="small" effect="dark" color="#4ba22f" v-if="scope.row.lssc == '1'">
              有效</el-tag>
            <el-tag style="border:none;" size="small" effect="dark" color="#6c778b" v-if="scope.row.lssc == '2'">
              无效</el-tag>
            <el-tag style="border:none;" size="small" effect="dark" color="#da7b21" v-if="scope.row.lssc == '3'">
              在审</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="pdt" align="center" label="专利类型">
        </el-table-column>
        <el-table-column prop="apc" align="center" label="当前申请(专利权)人">
        </el-table-column>
        <el-table-column prop="inc" align="center" label="发明人">
        </el-table-column>
        <el-table-column prop="ad" align="center" label="申请日">
        </el-table-column>
        <el-table-column prop="pd" align="center" label="公告(公开)日">
        </el-table-column>
        <el-table-column prop="pns" align="center" label="公开号" width="130">
        </el-table-column>
      </el-table>
      <el-table v-else-if="type == 2" :data="tableData" border style="width: 100%;margin: 20px 0;"
        :header-cell-style="{ background: '#f0f7fc' }" @row-click="rowTrademark">
        <el-table-column prop="fd" label="申请日期">
          <template slot-scope="scope">
            {{ scope.row.fd | time }}
          </template>
        </el-table-column>

        <el-table-column prop="nc" label="类别"> </el-table-column>

        <el-table-column prop="tmog" label="商标">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px" :src="scope.row.tmsg" fit="cover">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="mno" label="商标名称"> </el-table-column>
        <el-table-column prop="rn" label="注册号"> </el-table-column>
        <el-table-column prop="cs" label="状态"> </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background v-if="page.total" @current-change="handleCurrentChange" :current-page="page.page"
          :page-size="page.page_row" layout="total, prev, pager, next, jumper" :total="parseInt(page.total)"
          align='left'></el-pagination>
      </div>
    </el-main>
  </div>
</template>

<script>
import {
  intelligence,
  searchExpression,
} from "@/api/configApi"
export default {
  components: {
  },
  data() {
    return {
      tableData: [],
      currentPage: 1, //默认显示页面为1
      pagesize: 10, //    每页的数据条数
      page: {
        page: 1,
        page_row: 10,
        total: 0
      },
      list_page: sessionStorage.getItem('list_page') ? sessionStorage.getItem('list_page') : 1,
      val: null,
      search: '',
      type: null,
      typeVal: '',
      items: [
        { type: '', label: '发明专利' },
        { type: '', label: '实用类型' },
        { type: '', label: '外观设计' },
      ],
      sort_column: '-AD',
      columnOptions: [
        { value: '-AD', label: '申请日从新到旧' },
        { value: '+AD', label: '申请日从旧到新' },
        { value: '-PD', label: '公开日从新到旧' },
        { value: '+PD', label: '公开日从旧到新' },
      ],
    }
  },
  filters: {
    time(date) {
      if (date) {
        date = new Date(date);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
      } else {
        return "";
      }
      return y + "-" + m + "-" + d;
    },
  },
  mounted() {
    this.type = Number(this.$route.query.type)
    this.typeVal = this.$route.query.typeVal
    this.val = this.$route.query.val
    try {
      if (this.type == 1) {
        intelligence({
          page: this.list_page,
          text: this.$route.query.val,
          sort_column: this.sort_column
        }).then(res => {
          if (res.list) {
            this.tableData = res.list;
            this.page = {
              page: res.page,
              page_row: 10,
              total: res.total
            }
            if (res.total >= 10000) {
              this.page.total = 10000
            }
            console.log(this.page, 'pahge');
          } else {
            this.tableData = []
            this.page = {
              page: 1,
              page_row: 10,
              total: 0
            }
          }
        })
      } else if (this.type == 2) {
        this.searchExpression()
      }
    } catch (e) {
      this.$message(err.message);
    }
  },
  methods: {
    searchExpression() {
      let express = ''
      if (this.typeVal == '全部') {
        express = "申请人名称=" +
          this.val +
          " OR " +
          "商标名称=" +
          this.val +
          " OR " +
          "注册号=" +
          this.val
      } else if (this.typeVal == '申请人名称') {
        express = "申请人名称=" + this.val
      } else if (this.typeVal == '商标名称') {
        express = "商标名称=" + this.val
      } else if (this.typeVal == '注册号') {
        express = "注册号=" + this.val
      }
      searchExpression({
        express: express,
        page: this.page.page,
        page_row: this.page.page_row,
        sort_column: "-FD",
      }).then(res => {
        if (res.list) {
          this.tableData = res.list;
          this.page = {
            page: res.page,
            page_row: 10,
            total: res.total
          }
          if (res.total >= 10000) {
            this.page.total = 10000
          }
        } else {
          this.tableData = []
          this.page = {
            page: 1,
            page_row: 10,
            total: 0
          }
        }
      })
    },
    rowTrademark(row, event, column) {

    },
    rowClick(row, event, column) {
      const pid = row.pid;
      const ano = row.ano;
      sessionStorage.setItem('list_page', this.list_page)
      sessionStorage.setItem('pc', 1)
      sessionStorage.setItem("url",`/shundeSearchNew?val=${this.val}`) 
      sessionStorage.setItem("Shundepc", 1)
      //新窗口打开
      const { href } = this.$router.resolve({
        path: "/detail",
      });
      window.open(href + `?pid=${pid}&shunqiNewWebType=0&preview=1`, "_blank");
      // this.$router.push({ path: "/detail", query: { "pid": pid } })
    },
    async columnChange() {
      try {
        if (this.type == 1) {
          const res = await intelligence({
            text: `${this.val},${this.search ? ',' + this.search : ""}`,
            sort_column: this.sort_column,
            page: 1
          })
          if (res.list) {
            this.tableData = res.list;
            this.page = {
              page: res.page,
              page_row: 10,
              total: res.total
            }
            if (res.total >= 10000) {
              this.page.total = 10000
            }
          } else {
            this.tableData = []
            this.page = {
              page: 1,
              page_row: 10,
              total: 0
            }
          }
        } else if (this.type == 2) {
          this.searchExpression()
        }
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        if (this.type == 1) {
          const res = await intelligence({
            page: currentPage,
            text: `${this.val}${this.search ? ',' + this.search : ""}`,
            sort_column: this.sort_column
          })
          this.tableData = res.list;
          this.page = {
            page: res.page,
            page_row: 10,
            total: res.total
          }
          this.list_page = res.page

          if (res.total >= 10000) {
            this.page.total = 10000
          }
        } else if (this.type == 2) {
          this.searchExpression()
        }
      } catch (e) {
        this.$message.error(e.message)
      }
    },

  }
}
</script>

<style scoped >
.pagination {
  margin: 15px 0;
}

.el-pagination {
  text-align: right;
}


.right {
  margin-right: 10px;
  height: 40px;
  line-height: 40px;
}

@media (max-width:1600px) {
  #table {
    width: 95% !important;
  }

}
</style>
